<template>
  <div class="hamburger-container" @click="handleClick">
    <svg-icon
      custom-class="hamburger"
      icon-name="ant-design:bars-outlined"
      :class="{ 'rotate-180': isActive }"
    />
  </div>
</template>

<script setup lang="ts">
const { isActive } = defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits<{ (e: "toggleClick"): void }>()
const handleClick = () => {
  emit("toggleClick")
}
</script>

<style lang="scss" scoped>
.hamburger-container {
  @apply leading-[50px] h-full float-left cursor-pointer transition-all duration-300 px-10px hover:(bg-black/5);
}
.hamburger {
  @apply inline-block align-middle transition-transform duration-300 w-25px h-25px;
}
</style>
